<template>
	<el-main>
		<el-card class="box-card" shadow="never">
			<div class="search-box">
				<el-form :inline="true" :model="searchForm" class="demo-form-inline">
					<el-form-item label="订单号">
						<el-input v-model="searchForm.order_no" placeholder="" clearable></el-input>
					</el-form-item>
					<el-form-item label="状态">
						<el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
							<el-option label="待支付" value="2"></el-option>
							<el-option label="待发货" value="3"></el-option>
							<el-option label="待收货" value="4"></el-option>
							<el-option label="已完成" value="6"></el-option>
							<el-option label="已关闭" value="8"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="下单人ID">
						<el-input v-model="searchForm.user_id" placeholder="" clearable></el-input>
					</el-form-item>
					<el-form-item label="下单人名">
						<el-input v-model="searchForm.username" placeholder="" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit" icon="el-icon-search" >查询</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-bottom: 10px"></div>
			<el-table
				:data="tableData"
				style="width: 100%;">
				<el-table-column
					width="70"
					prop="id"
					label="ID">
				</el-table-column>
				<el-table-column
					width="180"
					prop="order_no"
					label="订单号">
				</el-table-column>
				<el-table-column
					width="80"
					label="商品图片">
					<template #default="scope">
						<img :src="scope.row.detail.image" style="width: 40px;height: 40px"/>
					</template>
				</el-table-column>
				<el-table-column
					prop="detail.goods.name"
					width="500"
					label="商品名">
				</el-table-column>
				<el-table-column
					prop="integral"
					label="兑换积分">
				</el-table-column>
				<el-table-column
					prop="price"
					label="兑换金额">
				</el-table-column>
				<el-table-column
					width="100"
					label="下单人">
					<template #default="scope">
						<span>ID: {{ scope.row.user_id }} <br/>昵称：{{ scope.row.username }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="status_txt"
					label="状态">
				</el-table-column>
				<el-table-column
					width="160"
					prop="create_time"
					label="兑换时间">
				</el-table-column>
				<el-table-column
					prop="operation"
					width="160"
					fixed="right"
					label="操作">
					<template #default="scope">
						<el-button @click="handleExpress(scope.row)" type="text" size="small" v-if="scope.row.status == 3">发货</el-button>
						<el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
						<el-button @click="handleComplete(scope.row)" type="text" size="small" v-if="scope.row.status == 3 || scope.row.status == 4">完成</el-button>
					</template>
				</el-table-column>
			</el-table>

			<Pages :form="searchForm" :page-obj="page" @pageChange="handlePageChange" @pageJump="getList"></Pages>

			<el-dialog
				title="订单发货"
				v-model="deliverVisible"
				:close-on-click-modal="false"
				width="600px">
				<el-form ref="form" :model="deliverForm" label-width="80px">
					<el-form-item label="选择类型">
						<el-radio label="1" v-model="deliverForm.type">快递</el-radio>
						<el-radio label="2" v-model="deliverForm.type">无需发货</el-radio>
					</el-form-item>
					<el-form-item label="快递公司" v-if="deliverForm.type == 1">
						<el-select v-model="deliverForm.delivery_name" placeholder="请选择快递公司" style="width: 100%">
							<el-option :label="item.name" :value="item.name" v-for="item in express" :key="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="快递单号" v-if="deliverForm.type == 1">
						<el-input v-model="deliverForm.delivery_no"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="doExpress" :loading="loading">立即提交</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>

			<el-dialog
				title="订单详情"
				v-model="detailVisible"
				width="1000px">
				<el-descriptions title="订单信息">
					<el-descriptions-item label="订单ID">{{ orderDetail.order_no }}</el-descriptions-item>
					<el-descriptions-item label="订单状态">
						<el-tag size="small">{{ orderDetail.status_txt }}</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="购买数量">{{ orderDetail.num }}</el-descriptions-item>
					<el-descriptions-item label="商品总价">
						<span v-if="orderDetail.price != '0.00'" style="color:#e93323">{{ orderDetail.integral }}积分 + {{ orderDetail.price }}元</span>
						<span style="color:#e93323" v-else>{{ orderDetail.integral }}积分</span>
					</el-descriptions-item>
					<el-descriptions-item label="下单时间">{{ orderDetail.create_time }}</el-descriptions-item>
					<el-descriptions-item label="发货时间">{{ orderDetail.delivery_time }}</el-descriptions-item>
					<el-descriptions-item label="支付时间">{{ orderDetail.pay_time }}</el-descriptions-item>
					<el-descriptions-item label="三方单号">{{ orderDetail.third_code }}</el-descriptions-item>
					<el-descriptions-item label="三方信息"><span style="cursor: pointer;color:#409EFF;" @click="thirdDetail(orderDetail)">查看</span></el-descriptions-item>
					<el-descriptions-item label="买家备注">{{ orderDetail.remark }}</el-descriptions-item>
				</el-descriptions>
				<el-descriptions title="收件信息">
					<el-descriptions-item label="收货人">{{ orderDetail.address_info.real_name }}</el-descriptions-item>
					<el-descriptions-item label="联系电话">{{ orderDetail.address_info.phone}}</el-descriptions-item>
					<el-descriptions-item label="收货地址">{{ orderDetail.address_info.province }}{{ orderDetail.address_info.city }}{{ orderDetail.address_info.county }}{{ orderDetail.address_info.detail }}</el-descriptions-item>
				</el-descriptions>
				<el-descriptions title="物流信息">
					<el-descriptions-item label="快递公司">{{ orderDetail.delivery_name }}</el-descriptions-item>
					<el-descriptions-item label="单号">{{ orderDetail.delivery_no }}</el-descriptions-item>
				</el-descriptions>
			</el-dialog>

			<el-dialog
				title="三方返回信息"
				v-model="thirdVisible"
				width="1000px">
				<el-empty description="暂无" v-if="third_return == ''"></el-empty>
				<el-descriptions title="" direction="vertical" :column="4" border v-else>
					<el-descriptions-item :label="key" v-for="(item,key) in third_return" :key="key">{{ item }}</el-descriptions-item>
				</el-descriptions>
			</el-dialog>
		</el-card>
	</el-main>
</template>

<script>
import Pages from "@/components/pages/index.vue";

export default {
	name: "integral_order",
	components: {Pages},
	data() {
		return {
			searchForm: {
				user_id: '',
				username: '',
				status: '',
				order_no: '',
				limit: 15,
				page: 1
			},
			detailVisible: false,
			deliverForm: {
				order_id: 0,
				type: '1',
				delivery_name: '',
				delivery_code: '',
				delivery_no: ''
			},
			deliverVisible: false,
			page: {
				total: 0
			},
			tableData: [],
			loading: false,
			express: [],
			orderDetail: {
				address_info: {}
			},
			thirdVisible: false,
			third_return: ''
		}
	},
	mounted() {
		this.getList()
	},
	methods: {
		// 获取列表
		async getList() {
			let res = await this.$API.integral.orderList.get(this.searchForm)
			this.tableData = res.data.data
			this.total = res.data.total
		},
		// 翻页
		handlePageChange(val) {
			this.searchForm.page = val
			this.getList()
		},
		// 发货
		async handleExpress(row) {
			this.deliverVisible = true
			this.deliverForm.order_id = row.id

			let res = await this.$API.integral.getExpressInfo.get()
			if (res.code == 0) {
				this.express = res.data
			}
		},
		// 详情
		async handleDetail(row) {
			this.detailVisible = true

			let res = await this.$API.integral.orderDetail.get({id: row.id})
			this.orderDetail = res.data
		},
		// 完成
		handleComplete(row) {
			this.$confirm('确定完成该订单吗？订单状态不可逆，一旦标记为完成，则无法继续操作该订单，请谨慎操作！', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				let res = await this.$API.integral.completeOrder.get({id: row.id})
				if (res.code == 0) {
					this.getList()
					this.$message.success(res.msg)
				} else {
					this.$message.error(res.msg)
				}
			}).catch(() => {});
		},
		// 查询
		onSubmit() {
			this.getList()
		},
		// 物流发货
		async doExpress() {
			this.loading = true
			this.express.forEach(item => {
				if (item.name == this.deliverForm.delivery_name) {
					this.deliverForm.delivery_code = item.code
				}
			})
			let res = await this.$API.integral.express.post(this.deliverForm)
			this.loading = false
			if (res.code == 0) {
				this.deliverVisible = false
				this.deliverForm = this.$options.data().deliverForm
				this.$message.success(res.msg)
				this.getList()
			} else {
				this.$message.error(res.msg)
			}
		},
		// 三方信息
		thirdDetail(info) {
			this.third_return = info.return_msg ? JSON.parse(info.return_msg) : ''
			this.thirdVisible = true
		}
	}
}
</script>

<style scoped>
.el-button--small {
	padding: 0 !important;
}
</style>
